<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>可以射击的3D直升机</title>
    <style>
        .cuboid {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .cuboid__side:nth-of-type(1) {
            height: calc(var(--thickness) * 1vmin);
            width: 100%;
            position: absolute;
            top: 0;
            transform: translate(0, -50%) rotateX(90deg);
        }

        .cuboid__side:nth-of-type(2) {
            height: 100%;
            width: calc(var(--thickness) * 1vmin);
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(50%, -50%) rotateY(90deg);
        }

        .cuboid__side:nth-of-type(3) {
            width: 100%;
            height: calc(var(--thickness) * 1vmin);
            position: absolute;
            bottom: 0;
            transform: translate(0%, 50%) rotateX(90deg);
        }

        .cuboid__side:nth-of-type(4) {
            height: 100%;
            width: calc(var(--thickness) * 1vmin);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%) rotateY(90deg);
        }

        .cuboid__side:nth-of-type(5) {
            height: 100%;
            width: 100%;
            transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
            position: absolute;
            top: 0;
            left: 0;
        }

        .cuboid__side:nth-of-type(6) {
            height: 100%;
            width: 100%;
            transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
            position: absolute;
            top: 0;
            left: 0;
        }

        *,
        *:after,
        *:before {
            box-sizing: border-box;
            transform-style: preserve-3d;
            transition: background 0.25s;
        }

        :root {
            --base-size: 20;
            --helicopter-height: calc(var(--base-size) * 1vmin);
            --helicopter-width: calc(var(--helicopter-height) * 2);
            --helicopter-one: hsl(0, 0%, calc((60 + (var(--on, 0) * 35)) * 1%));
            --helicopter-two: hsl(0, 0%, calc((55 + (var(--on, 0) * 35)) * 1%));
            --helicopter-three: hsl(0, 0%, calc((50 + (var(--on, 0) * 35)) * 1%));
            --helicopter-four: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%));
            --chair-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 15)) * 1%));
            --chair-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 15)) * 1%));
            --chair-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 15)) * 1%));
            --chair-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 15)) * 1%));
            --dash-one: hsl(0, 0%, calc((50 + (var(--on, 0) * 15)) * 1%));
            --dash-two: hsl(0, 0%, calc((45 + (var(--on, 0) * 15)) * 1%));
            --dash-three: hsl(0, 0%, calc((40 + (var(--on, 0) * 15)) * 1%));
            --dash-four: hsl(0, 0%, calc((35 + (var(--on, 0) * 15)) * 1%));
            --accent-one: hsl(10, 60%, calc((30 + (var(--on, 0) * 35)) * 1%));
            --accent-two: hsl(10, 60%, calc((25 + (var(--on, 0) * 35)) * 1%));
            --accent-three: hsl(10, 60%, calc((20 + (var(--on, 0) * 35)) * 1%));
            --accent-four: hsl(10, 60%, calc((15 + (var(--on, 0) * 35)) * 1%));
            --rocket-one: hsl(1, 60%, calc((20 + (var(--on, 0) * 25)) * 1%));
            --rocket-two: hsl(1, 60%, calc((15 + (var(--on, 0) * 25)) * 1%));
            --rocket-three: hsl(1, 60%, calc((10 + (var(--on, 0) * 25)) * 1%));
            --rocket-four: hsl(1, 60%, calc((5 + (var(--on, 0) * 25)) * 1%));
            --screen-one: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.45);
            --screen-two: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.4);
            --screen-three: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.35);
            --screen-four: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.35);
            --bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%));
        }

        body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: var(--bg);
            overflow: hidden;
            touch-action: none;
        }

        .scene {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 100vmin);
            transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
        }

        .helicopter {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-20%, -50%);
        }

        .helicopter__wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-animation: float 1s infinite linear;
            animation: float 1s infinite linear;
            height: var(--helicopter-height);
            width: var(--helicopter-width);
        }

        @-webkit-keyframes float {
            50% {
                transform: translate(-50%, -65%);
            }
        }

        @keyframes float {
            50% {
                transform: translate(-50%, -65%);
            }
        }

        .helicopter__base-light {
            --hue: 20;
            bottom: -6%;
            width: 6%;
            height: 6%;
            left: 47%;
            position: absolute;
        }

        .helicopter__tail-light {
            --hue: 15;
            top: -20%;
            width: 20%;
            height: 20%;
            position: absolute;
            left: 65%;
        }

        .helicopter__wing-light {
            --hue: 90;
            --speed: 0.4;
            top: -50%;
            width: 10%;
            height: 50%;
            position: absolute;
            left: 45%;
        }

        .helicopter__wing-light--left {
            transform: translate3d(0, 0, calc(var(--base-size) * 0.5vmin));
        }

        .helicopter__wing-light--right {
            transform: translate3d(0, 0, calc(var(--base-size) * -0.5vmin));
        }

        .helicopter>* {
            position: absolute;
        }

        .helicopter__rotor {
            top: 0;
            left: 30%;
            height: 14%;
            width: 8%;
        }

        .helicopter__cockpit {
            left: 0;
            top: 14%;
            width: 54%;
            height: 70%;
        }

        .helicopter__tail {
            top: 30%;
            height: 20%;
            width: 46%;
            left: 54%;
        }

        .helicopter__fin {
            right: 2%;
            top: 10%;
            height: 20%;
            width: 10%;
        }

        .helicopter__stabilizer {
            right: 2%;
            top: 30%;
            height: 10%;
            width: 10%;
        }

        .helicopter__skids {
            bottom: 0;
            left: 0;
            height: 6%;
            width: 70%;
        }

        .helicopter__wing {
            height: 6%;
            width: 22%;
            left: 28%;
            top: 60%;
        }

        .helicopter__launchers {
            height: 10%;
            width: 18%;
            left: 30%;
            top: 66%;
        }

        .helicopter__chair {
            position: absolute;
            left: 18%;
            top: 30%;
            width: 28%;
            height: 58%;
        }

        .helicopter__chair-back {
            position: absolute;
            width: 25%;
            right: 0;
            top: 0;
            height: 100%;
        }

        .helicopter__chair-bottom {
            position: absolute;
            height: 20%;
            right: 0;
            bottom: 0;
            width: 80%;
        }

        .helicopter__launcher {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .helicopter__launcher--left {
            transform: translate3d(0, 0, calc(var(--base-size) * -0.425vmin));
        }

        .helicopter__launcher--right {
            transform: translate3d(0, 0, calc(var(--base-size) * 0.425vmin));
        }

        .helicopter__triblade {
            position: absolute;
            height: 100%;
            width: 100%;
            left: 50%;
            top: 50%;
            transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(1.25);
            border-radius: 50%;
            overflow: hidden;
            -webkit-animation: rotate-tri 0.2s infinite linear;
            animation: rotate-tri 0.2s infinite linear;
        }

        .helicopter__triblade:after,
        .helicopter__triblade:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            width: 15%;
            background: var(--chair-four);
            transform: translate(-50%, -50%);
        }

        .helicopter__triblade:after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        @-webkit-keyframes rotate-tri {
            to {
                transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(1.25) rotate(-360deg);
            }
        }

        @keyframes rotate-tri {
            to {
                transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(1.25) rotate(-360deg);
            }
        }

        .helicopter__blades {
            height: calc(var(--helicopter-height) * 2);
            width: calc(var(--helicopter-height) * 2);
            left: 34%;
            top: 0%;
            transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px);
            border-radius: 50%;
            overflow: hidden;
            -webkit-animation: blades infinite 0.1s linear;
            animation: blades infinite 0.1s linear;
        }

        .helicopter__blades:after,
        .helicopter__blades:before {
            content: '';
            height: 100%;
            width: 10%;
            background: linear-gradient(var(--chair-one) 0 5%, var(--accent-one) 5% 10%, var(--chair-one) 10% 90%, var(--accent-one) 90% 95%, var(--chair-one) 95% 100%);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .helicopter__blades:after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .helicopter__skid {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .helicopter__skid:after,
        .helicopter__skid:before {
            content: '';
            position: absolute;
            left: 16%;
            width: 4%;
            bottom: 0;
            height: 400%;
            background: var(--chair-four);
            transform-origin: 50% 100%;
            transform: rotateX(calc(25 * var(--coefficient, 1deg)));
        }

        .helicopter__skid:before {
            left: 56%;
        }

        .helicopter__skid--left {
            transform: translate3d(0, 0, calc(var(--base-size) * 0.4vmin));
        }

        .helicopter__skid--right {
            --coefficient: -1deg;
            transform: translate3d(0, 0, calc(var(--base-size) * -0.4vmin));
        }

        .helicopter__dashboard {
            position: absolute;
            left: 2%;
            top: 50%;
            width: 16%;
            height: 38%;
        }

        @-webkit-keyframes shift {

            0%,
            10%,
            90%,
            100% {
                transform: translate(-20%, -50%) translate3d(0, 0, 0);
            }

            20%,
            50% {
                transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
            }

            60%,
            80% {
                transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
            }
        }

        @keyframes shift {

            0%,
            10%,
            90%,
            100% {
                transform: translate(-20%, -50%) translate3d(0, 0, 0);
            }

            20%,
            50% {
                transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
            }

            60%,
            80% {
                transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
            }
        }

        .cuboid--cockpit {
            --thickness: calc(var(--base-size) * 0.6);
        }

        .cuboid--cockpit div {
            background: var(--helicopter-four);
        }

        .cuboid--cockpit div:nth-of-type(1) {
            background: linear-gradient(90deg, var(--screen-one) 0 50%, var(--helicopter-one) 50% 100%) 50% 50%/100% 100% no-repeat;
        }

        .cuboid--cockpit div:nth-of-type(2):after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            height: calc(100% - 1px);
            width: calc(100% - 1px);
            background: #914db3;
            transform: translate3d(-50%, -50%, calc(var(--helicopter-width) * -0.27));
        }

        .cuboid--cockpit div:nth-of-type(4) {
            background: transparent;
            background: linear-gradient(var(--screen-two) 0% 80%, var(--helicopter-one) 80% 100%) 50% 50%/100% 100% no-repeat;
        }

        .cuboid--cockpit div:nth-of-type(5) {
            background: transparent;
            background: linear-gradient(var(--helicopter-three), var(--helicopter-three)) 100% 50%/50% 100% no-repeat, linear-gradient(var(--screen-three) 0% 80%, var(--helicopter-three) 80% 100%) 0% 50%/50% 100% no-repeat;
        }

        .cuboid--cockpit div:nth-of-type(5):after {
            content: '';
            position: absolute;
            top: 50%;
            height: 50%;
            width: 25%;
            right: 15%;
            transform: translate3d(0%, -60%, 1px) scale(0.75);
            filter: saturate(0.5);
        }

        .cuboid--cockpit div:nth-of-type(6) {
            background: transparent;
            background: linear-gradient(var(--helicopter-two), var(--helicopter-two)) 0 50%/50% 100% no-repeat, linear-gradient(var(--screen-four) 0% 80%, var(--helicopter-two) 80% 100%) 100% 50%/50% 100% no-repeat;
        }

        .cuboid--cockpit div:nth-of-type(6):after {
            content: '';
            position: absolute;
            top: 50%;
            height: 50%;
            width: 25%;
            left: 15%;
            transform: translate3d(0%, -60%, 1px) scale(0.75);
            filter: saturate(0.5);
        }

        .cuboid--tail {
            --thickness: calc(var(--base-size) * 0.4);
            --clip: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
        }

        .cuboid--tail div {
            background: var(--accent-four);
        }

        .cuboid--tail div:nth-of-type(1) {
            background: var(--accent-one);
            -webkit-clip-path: var(--clip);
            clip-path: var(--clip);
        }

        .cuboid--tail div:nth-of-type(2) {
            background: var(--accent-one);
            background: linear-gradient(90deg, transparent 0 40%, var(--accent-four) 40% 60%, transparent 60% 100%);
        }

        .cuboid--tail div:nth-of-type(3) {
            background: var(--accent-two);
            -webkit-clip-path: var(--clip);
            clip-path: var(--clip);
        }

        .cuboid--tail div:nth-of-type(4) {
            background: var(--accent-three);
        }

        .cuboid--tail div:nth-of-type(5) {
            background: transparent;
        }

        .cuboid--tail div:nth-of-type(5):after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: var(--accent-three);
            transform-origin: 0 50%;
            transform: rotateY(10deg);
        }

        .cuboid--tail div:nth-of-type(6) {
            background: transparent;
        }

        .cuboid--tail div:nth-of-type(6):after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: var(--accent-three);
            transform-origin: 100% 50%;
            transform: rotateY(-10deg);
        }

        .cuboid--stabilizer {
            --thickness: calc(var(--base-size) * 0.4);
        }

        .cuboid--stabilizer div {
            background: var(--helicopter-four);
        }

        .cuboid--stabilizer div:nth-of-type(1) {
            background: var(--helicopter-one);
        }

        .cuboid--stabilizer div:nth-of-type(3) {
            background: var(--helicopter-two);
        }

        .cuboid--stabilizer div:nth-of-type(4) {
            background: var(--helicopter-three);
        }

        .cuboid--fin {
            --thickness: calc(var(--base-size) * 0.1);
        }

        .cuboid--fin div {
            background: var(--helicopter-four);
        }

        .cuboid--fin div:nth-of-type(1) {
            background: linear-gradient(90deg, transparent 0 50%, var(--helicopter-one) 50% 100%);
        }

        .cuboid--fin div:nth-of-type(3) {
            background: var(--helicopter-two);
        }

        .cuboid--fin div:nth-of-type(4) {
            background: transparent;
        }

        .cuboid--fin div:nth-of-type(4):after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            background: var(--helicopter-two);
            height: 110%;
            width: 100%;
            transform-origin: 50% 100%;
            transform: rotateX(-24deg);
        }

        .cuboid--fin div:nth-of-type(5) {
            background: var(--helicopter-three);
            --clip: polygon(0 100%, 50% 0, 100% 0, 100% 100%);
            -webkit-clip-path: var(--clip);
            clip-path: var(--clip);
        }

        .cuboid--fin div:nth-of-type(6) {
            background: var(--helicopter-three);
            --clip: polygon(0 0%, 50% 0, 100% 100%, 0 100%);
            -webkit-clip-path: var(--clip);
            clip-path: var(--clip);
        }

        .cuboid--skid {
            --thickness: calc(var(--base-size) * 0.06);
        }

        .cuboid--skid div {
            background: var(--chair-four);
        }

        .cuboid--skid div:nth-of-type(1) {
            background: var(--chair-one);
        }

        .cuboid--skid div:nth-of-type(3) {
            background: var(--chair-two);
        }

        .cuboid--skid div:nth-of-type(4) {
            background: var(--chair-three);
        }

        .cuboid--dashboard {
            --thickness: calc(var(--base-size) * 0.52);
        }

        .cuboid--dashboard div {
            background: var(--dash-four);
        }

        .cuboid--dashboard div:nth-of-type(1) {
            background: var(--dash-one);
        }

        .cuboid--dashboard div:nth-of-type(3) {
            background: var(--dash-two);
        }

        .cuboid--dashboard div:nth-of-type(4) {
            background: var(--dash-three);
        }

        .cuboid--chair {
            --thickness: calc(var(--base-size) * 0.4);
        }

        .cuboid--chair div {
            background: var(--chair-four);
        }

        .cuboid--chair div:nth-of-type(1) {
            background: var(--chair-one);
        }

        .cuboid--chair div:nth-of-type(3) {
            background: var(--chair-two);
        }

        .cuboid--chair div:nth-of-type(4) {
            background: var(--chair-three);
        }

        .cuboid--wing {
            --thickness: calc(var(--base-size) * 1.1);
        }

        .cuboid--wing div {
            background: var(--accent-four);
        }

        .cuboid--wing div:nth-of-type(1) {
            background: var(--accent-one);
        }

        .cuboid--wing div:nth-of-type(3) {
            background: var(--accent-two);
        }

        .cuboid--wing div:nth-of-type(4) {
            background: var(--accent-three);
        }

        .cuboid--rotor {
            --thickness: calc(var(--base-size) * 0.14);
        }

        .cuboid--rotor div {
            background: var(--dash-four);
        }

        .cuboid--rotor div:nth-of-type(1) {
            background: var(--dash-one);
        }

        .cuboid--rotor div:nth-of-type(3) {
            background: var(--dash-two);
        }

        .cuboid--rotor div:nth-of-type(4) {
            background: var(--dash-three);
        }

        .cuboid--launcher {
            --thickness: calc(var(--base-size) * 0.08);
        }

        .cuboid--launcher div {
            background: var(--rocket-four);
        }

        .cuboid--launcher div:nth-of-type(1) {
            background: var(--rocket-one);
        }

        .cuboid--launcher div:nth-of-type(3) {
            background: var(--rocket-two);
        }

        .cuboid--launcher div:nth-of-type(4) {
            background: var(--rocket-three);
        }

        .cuboid--light {
            --thickness: calc(var(--base-size) * 0.035);
            -webkit-animation: flash calc((1 - var(--on, 0)) * (var(--speed, 1) * 1s)) infinite;
            animation: flash calc((1 - var(--on, 0)) * (var(--speed, 1) * 1s)) infinite;
        }

        .cuboid--light div {
            background: hsla(var(--hue, 10), 90%, 50%, var(--alpha, 0));
        }

        .helicopter__ammo {
            height: 50%;
            width: 30%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }

        .cuboid--ammo {
            --thickness: calc(var(--base-size) * 0.05);
        }

        .cuboid--ammo div {
            background: hsl(var(--hue), 80%, 80%);
        }

        button {
            height: 48px;
            width: 48px;
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            cursor: pointer;
            transform: translate3d(0, 0, 150vmin);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 0;
            background: transparent;
            outline: transparent;
        }

        button>svg {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
        }

        button path {
            fill: hsl(210, 80%, calc((90 - (var(--on, 0) * 75)) * 1%));
        }

        button svg:nth-of-type(1),
        button span:nth-of-type(1) {
            display: none;
        }

        button span {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        [aria-pressed='true'] svg:nth-of-type(1),
        [aria-pressed='true'] span:nth-of-type(1) {
            display: block;
        }

        [aria-pressed='true'] svg:nth-of-type(2),
        [aria-pressed='true'] span:nth-of-type(2) {
            display: none;
        }

        @-webkit-keyframes blades {
            to {
                transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px) rotate(-360deg);
            }
        }

        @keyframes blades {
            to {
                transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px) rotate(-360deg);
            }
        }

        @-webkit-keyframes flash {
            50% {
                --alpha: 1;
            }
        }

        @keyframes flash {
            50% {
                --alpha: 1;
            }
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="helicopter__tilter">
            <div class="helicopter__wrapper">
                <div class="helicopter">
                    <div class="helicopter__rotor">
                        <div class="cuboid cuboid--rotor">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                        </div>
                    </div>
                    <div class="helicopter__cockpit">
                        <div class="cuboid cuboid--cockpit">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                        </div>
                        <div class="helicopter__base-light">
                            <div class="cuboid cuboid--base-light cuboid--light">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                        <div class="helicopter__chair">
                            <div class="helicopter__chair-back">
                                <div class="cuboid cuboid--chair">
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                </div>
                            </div>
                            <div class="helicopter__chair-bottom">
                                <div class="cuboid cuboid--chair">
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                    <div class="cuboid__side"></div>
                                </div>
                            </div>
                        </div>
                        <div class="helicopter__dashboard">
                            <div class="cuboid cuboid--dashboard">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                    </div>
                    <div class="helicopter__tail">
                        <div class="cuboid cuboid--tail">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                        </div>
                    </div>
                    <div class="helicopter__fin">
                        <div class="cuboid cuboid--fin">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                        </div>
                        <div class="helicopter__triblade"></div>
                        <div class="helicopter__tail-light">
                            <div class="cuboid cuboid--tail-light cuboid--light">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                    </div>
                    <div class="helicopter__stabilizer">
                        <div class="cuboid cuboid--stabilizer">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                        </div>
                    </div>
                    <div class="helicopter__skids">
                        <div class="helicopter__skid--left helicopter__skid">
                            <div class="cuboid cuboid--skid">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                        <div class="helicopter__skid--right helicopter__skid">
                            <div class="cuboid cuboid--skid">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                    </div>
                    <div class="helicopter__wing">
                        <div class="cuboid cuboid--wing">
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                            <div class="cuboid__side"></div>
                        </div>
                        <div class="helicopter__wing-light helicopter__wing-light--left">
                            <div class="cuboid cuboid--wing-light cuboid--light">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                        <div class="helicopter__wing-light helicopter__wing-light--right">
                            <div class="cuboid cuboid--wing-light cuboid--light">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                    </div>
                    <div class="helicopter__launchers">
                        <div class="helicopter__launcher helicopter__launcher--left">
                            <div class="cuboid cuboid--launcher">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                        <div class="helicopter__launcher helicopter__launcher--right">
                            <div class="cuboid cuboid--launcher">
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                                <div class="cuboid__side"></div>
                            </div>
                        </div>
                    </div>
                    <div class="helicopter__blades"></div>
                </div>
            </div>
        </div>
    </div><button title="Toggle theme"><span>Turn Lights Off</span><span>Turn Lights On</span><svg viewBox="0 0 512 512"
            width="100" title="moon">
            <path
                d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z">
            </path>
        </svg><svg viewBox="0 0 512 512" width="100" title="sun">
            <path
                d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z">
            </path>
        </svg></button>
    <script
        type="module">import gsap from 'https://cdn.skypack.dev/gsap@3.11.0'; let FIRING = false; const BOUNDS = 50; document.addEventListener('pointermove', ({ x, y }) => { const newX = gsap.utils.mapRange(0, window.innerWidth, -BOUNDS, BOUNDS, x); const newY = gsap.utils.mapRange(0, window.innerHeight, BOUNDS, -BOUNDS, y); gsap.set(document.documentElement, { '--rotate-x': newY, '--rotate-y': newX, }) }); const LEFT_LAUNCHER = document.querySelector('.helicopter__launcher--left'); const RIGHT_LAUNCHER = document.querySelector('.helicopter__launcher--right'); gsap.ticker.add((time, deltaTime, frame) => { if (FIRING) { const AMMO = document.createElement('div'); AMMO.innerHTML = `<div class="cuboid cuboid--ammo"><div class="cuboid__side"></div><div class="cuboid__side"></div><div class="cuboid__side"></div><div class="cuboid__side"></div><div class="cuboid__side"></div><div class="cuboid__side"></div></div>`; AMMO.className = 'helicopter__ammo'; AMMO.style.setProperty('--hue', Math.random() * 360); if (frame % 2 === 0) LEFT_LAUNCHER.appendChild(AMMO); else RIGHT_LAUNCHER.appendChild(AMMO); gsap.to(AMMO, { xPercent: () => gsap.utils.random(-3000, -2000), onComplete: () => AMMO.remove(), }) } }); gsap.ticker.fps(24); document.addEventListener('pointerdown', () => { FIRING = true }); document.addEventListener('pointerup', () => { FIRING = false }); const THEMES = (window.THEMES = { LIGHT: 'LIGHT', DARK: 'DARK', KEY: 'THEME', }); window.LIGHT_QUERY = window.matchMedia('(prefers-color-scheme: light)'); window.__setTheme = (theme) => { window.__THEME = theme; window.localStorage.setItem(THEMES.KEY, theme) }; const stored = localStorage.getItem(THEMES.KEY); if (stored) { window.__THEME = stored; window.__setTheme(stored) } else { if (window.LIGHT_QUERY.matches) { window.__THEME = THEMES.LIGHT } else { window.__THEME = THEMES.DARK } window.__setTheme(window.__THEME) } window.INITIAL_THEME = (window.__THEME && window.__THEME === THEMES.LIGHT) || (window.localStorage.getItem(THEMES.KEY) && window.localStorage.getItem(THEMES.KEY) === THEMES.LIGHT); const BUTTON = document.querySelector('button'); gsap.set(BUTTON, { attr: { 'aria-pressed': window.__THEME === THEMES.DARK ? 'false' : 'true', }, }); gsap.set('html', { '--on': window.__THEME === THEMES.DARK ? 0 : 1, }); BUTTON.addEventListener('click', () => { const NEW_THEME = window.__THEME === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK; window.__setTheme(NEW_THEME); gsap.set('button', { attr: { 'aria-pressed': NEW_THEME === THEMES.DARK ? 'false' : 'true', }, }); gsap.set('html', { '--on': window.__THEME === THEMES.DARK ? 0 : 1, }) });</script>
</body>

</html>